import { useEffect, useState, useRef } from 'react';
import { resourcePath } from '../../../../../../utils/resource';
import Example from '../example';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import { Button, Row, Table } from 'antd';
import { navByWkt } from '../../../../../../utils/helper/mapHelper';
import PanelLeft from '../../../../../common/PanelLeft';
import { Icon, Style } from 'ol/style';
import { clearHighlight, createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';
import Dzkspg from './Dzkspg';
import Dzsbao from './Dzsbao';
import PgDetail from './PgDetail';
import SbaoDetail from './SbaoDetail';
import yqPng from '../Fxjc/images/yq.png';
import Yujinmsg from '../Yujinmsg';
import Dztool from './Dztool';
import Dzpg from './Dzpg';
import Moli from './Moli';
import Xq from '../Fxjc/Xq';
import KspgDetail from './PgDetail/KspgDetail';
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
import { Overlay } from 'ol';
import DzenXqDetail from '../Fxjc/DzenXqDetail';
import { feature, features } from 'caniuse-lite';
import { useContext } from 'react';
import jcyjContext from '../jcyjContext';


// 地震
export default function Dzjc(props) {
    const map = useBusinessMap();
    // clearHighlight(map);
    const [subaoItem, setSubaoItem] = useState();
    const [params, setParams] = useState({
        pageSize: 5,
        pageNum: 1,
    });

    const [showKspg, setShowKspg] = useState(false);

    //用于详情数据更新
    const [datas3, setDatas3] = useState();
    const [datas2, setDatas2] = useState();
    const [datas1, setDatas1] = useState();
    function datagx(a) {
        setDatas1(a);

    }
    const [xlName, setXlName] = useState();
    const [layers, setLayers] = useState();
    const { jcdListDates, setJyl } = useContext(jcyjContext)
    useEffect(() => {
        setJyl([{
            name: '翠屏区', value: '0',
        }, {
            name: '南溪区', value: '0',
        }, {
            name: '叙州区', value: '0',
        }, {
            name: '江安县', value: '0',
        }, {
            name: '长宁县', value: '0',
        }, {
            name: '高县', value: '0',
        }, {
            name: '珙县', value: '0',
        }, {
            name: '筠连县', value: '0',
        }, {
            name: '兴文县', value: '0',
        }, {
            name: '屏山县', value: '0',
        }, {

        }])
    }, [setJyl])
    useEffect(() => {
        setXlName(null)
    }, [subaoItem])
    useEffect(() => {
        if (map) {
            const handler = evt => {
                const features = map.getFeaturesAtPixel(evt.pixel);
                const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
                if (item) {
                    setSubaoItem(null);
                    switch (item.jcdlx) {
                        case '测震':
                            setSubaoItem(item);
                            break;
                        default:
                    }
                }

            }
            map.on('singleclick', handler);

            return () => {
                map.un('singleclick', handler);
            }
        }
    }, [map])
    useEffect(() => {
        if (map) {
            let dzLayer;
            const features = jcdListDates?.rows?.filter(row => {
                return row.geom
            })?.map(item => {
                return dataToFeature(item)
            })
            dzLayer = createLayer((feature) => {
                return new Style({
                    image: new Icon({
                        src: resourcePath.mapIcons.dze_blue,
                        scale: 0.7,
                        anchor: [0.5, 1]
                        // size: [60, 98],
                        // scale: 1 / 24
                    })
                })
            }, features?.filter(feature => feature.get('jcdlx') === '测震') || []);
            dzLayer.set('type', 'dz')
            dzLayer.set('layerName', 'icon-layer');
            map.addLayer(dzLayer)
            setLayers([dzLayer])
            return () => {
                map.removeLayer(dzLayer)
            }
        }
    }, [map, jcdListDates])

    return <>
        <PanelLeft>
            <div className='' style={{
                width: 350,
                position: 'absolute',
                left: 30,
                top: 30,
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                pointerEvents: 'auto',
                overflow: 'auto',
                borderRadius: 8
            }}>


                <Dzsbao onDetail={
                    item => {
                        setSubaoItem(item)
                    }} />

            </div>
        </PanelLeft>
        <Example datas={[
            {
                name: '预警信息',
                iconPath: resourcePath.mapIcons.yjxx_red,
                type: 'hongs'
            },
            {
                name: '地震监测',
                iconPath: resourcePath.mapIcons.dze_blue,
                type: 'dz'
            },
            //  {
            //     name: '震级监测',
            //     iconPath: resourcePath.mapIcon.dz,
            //     type: 'dz'
            // }
        ]} onVisibleChange={(checked, value) => {
            const yjLayer = map.getLayers().getArray().find(l => l.get('type') === 'hongs');
            [yjLayer, ...layers].find(layer => layer.get('type') === value)?.set('visible', checked)
        }} />
        <div style={{
            display: !datas1 ? 'flex' : 'none'
        }}>
            {
                subaoItem && <PgDetail item={subaoItem} onClose={e => {
                    setSubaoItem(null);
                    // clearHighlight(map);
                    // setShowKspg(true)
                }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />
            }
        </div>
        <div style={{
            display: xlName ? 'none' : 'block'
        }}>
            {datas1 && <Xq datas1={datas1} datas2={datas2} datas3={datas3} onClose={e => { setDatas1(null) }} onName={setXlName}></Xq>}
        </div>


        {
            xlName && <DzenXqDetail xlName={xlName} datas1={datas1} onClose={() => setXlName(null)} />
        }





    </>
}